<template>
	<view class="content">
		<div
			style="
			border-bottom: 1px solid #99999980;
			height: 44px;background-color: #FFFFFF;display: flex;flex-direction: row;align-items: center;justify-content: center;">
			<div @click='tabClick(0)' :style="{'padding': '5px 12px','background-color': tabindex == 0?'#007AFF':'#f5f5f5','font-size': '14px',
			'color':tabindex==0?'#ffffff':'#222222'
			}">个人资料</div>
			<div @click='tabClick(1)' :style="{'padding': '5px 12px','background-color': tabindex == 1?'#007AFF':'#f5f5f5','font-size': '14px',
			'color':tabindex==1?'#ffffff':'#222222'
			}">工作台</div>
		</div>
		<div>{{i18n.home}}</div>
		<!-- segment -->
		<div style="flex: 1;overflow-y: auto;">
			<workbench v-if="tabindex == 1" />
			<div v-else style="flex: 1;">
				<hasbindstudent v-if="hasBind" />
				<personinfo v-else />
			</div>
		</div>
	</view>
</template>

<script>
	import workbench from "@/pages/workbench/workbench"
	import hasbindstudent from "@/pages/personinfo/personinfo-hasbindstudent"
	import personinfo from "@/pages/personinfo/personinfo-unbind"
	export default {
		components: {
			workbench,
			personinfo,
			hasbindstudent
		},
		data() {
			return {
				tabindex: 1,
				hasBind: false,
			}
		},
		onLoad() {},
		mounted() {
			uni.$on("hasBind", this.pageUpdate)
		},
		computed: {
			i18n() {
				return this.$t('school')
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx;
			},
			pageUpdate(e) {
				this.hasBind = e.data;
			}
		}
	}
</script>

<style>
	.content {
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
</style>
